<%--
  Created by IntelliJ IDEA.
  User: 骆鹏
  Date: 2017/7/26
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>企业巡检新建</title>

    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/lib/layer/layer.js?20201106"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <script src="../js/jquery/jquery.cookie.js"></script>
    <style>
        .M-box3 a:hover {
            background: #2f80d1!important;
            margin: 0 3px!important;
            width: 29px!important;
            height: 29px!important;
            line-height: 29px!important;
            font-size: 12px!important;
        }
        .M-box .active, .M-box1 .active, .M-box2 .active, .M-box3 .active{
            background: #2f80d1!important;
            border: 1px solid #2b7fe0!important;
            margin: 0 3px!important;
            width: 29px!important;
            height: 29px!important;
            line-height: 29px!important;
            font-size: 12px!important;
        }
        .M-box a, .M-box1 a, .M-box2 a, .M-box3 a{
            margin: 0 3px!important;
            width: 29px!important;
            height: 29px!important;
            line-height: 29px!important;
            font-size: 12px!important;
        }
        .jump-ipt {
            margin: 0 3px;
            width: 28px;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
        }
        .ds img{
            width: 100%;
            height: 100%;
        }
        .bordercolor b{
            margin-left: 10px;
        }
        .tijiao {
            position: absolute;
            width: 142px;
            height: 38px;
            right: 0;
            margin: auto;
            left: -200px;
            background-color: #228CDC;
            text-align: center;
            font-size: 16px;
            line-height: 38px;
            color: #fff;
            border-radius: 5px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .fanhui {
            position: absolute;
            width: 142px;
            height: 38px;
            right: 0;
            margin: auto;
            left: 250px;
            background-color: #698CAC;
            text-align: center;
            font-size: 16px;
            line-height: 38px;
            color: #fff;
            border-radius: 5px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .mainTitleUl .bordercolor span{
            font-size: 14px;
        }
        .mainTitleUl .bordercolor label input[type=text]{
            font-size: 14px;
        }
        ul .pic{
            padding-left:5px!important;
        }
    </style>
    <link rel="stylesheet" href="/css/biaodan.css">
</head>
<body>

    
    <div style="margin: 0 auto;margin-top: 5px;height: 60px;width: 97%;" class="clearfix">

        <div id="dbgz_page" class="M-box3 fr">

        </div>
    </div>


    <div class="mainBg" style="background: #fff; padding-top: 0px;">
        <form action="/communitypatrol/addPatrol" id="datasave">
            <input type="file"  onchange="filesTwo(this)" multiple="multiple" name="file"
                   style="display: none"/>
            <input type="hidden" name="patrolId">
            <%--<input type="hidden" name="checkId">--%>
            <div class="mainTitle" style="width: 68%;padding-bottom: 75px;">
                <ul class="mainTitleUl">
                    <li style="    padding-top: 18px;text-align: center;height: 61px;border-bottom: 1px solid #ddd"><span class="spanSize">企业巡检单</span> </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">问题类别</span>
                        <label>
                            <input type="text" name="prolemType" placeholder="请填写问题类别" style="background: #fcfcfc;    width: 92%;
    float: none;
    margin-top: 0px; margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">所属区县
                            <%--<b style="color: red;vertical-align: middle; margin-top: 8px;">*</b>--%>
                        </span>
                        <label>
                            <input type="text" name="subCounty" placeholder="请填写所属区县" style="background: #fcfcfc;    width: 92%;
    float: none;
    margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">所属乡镇</span>
                        <label>
                            <input type="text" name="subVillage" placeholder="请填写所属乡镇" style="background: #fcfcfc;    width: 92%;float: none;margin-top: 0px; margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">上报时间</span>
                        <label>
                            <input type="text" id="time" name="reportTime" placeholder="请填写上报时间" disabled="disabled"  style="background: #fcfcfc;    width: 92%;float: none;margin-top: 0px; margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">巡查人员</span>
                        <label>
                            <input type="text" name="patrolUser" placeholder="请填写巡查人员" style="background: #fcfcfc;    width: 92%;float: none;margin-top: 0px; margin-top: 8px;">
                        </label>
                        <span style="border-bottom: 1px solid #fff">联系方式</span>
                        <label>
                            <input type="text" name="contact" placeholder="请填写巡查联系方式" style="background: #fcfcfc;    width: 92%;float: none;margin-top: 0px; margin-top: 8px;">
                        </label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">存在问题</span>
                        <label>
                            <input type="text" name="existingProblem" placeholder="请填写存在问题" style="background: #fcfcfc;    width: 258%;float: none;margin-top: 0px; margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">污染源名称<b style="color: red;">*</b></span>
                        <label>
                            <input type="text" name="pollutionName" placeholder="请填写污染源名称" style="background: #fcfcfc;    width: 258%;float: none;margin-top: 0px; margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">污染源位置</span>
                        <label>
                            <input type="text" name="pollutionLocation" placeholder="请填写污染源位置" style="background: #fcfcfc;    width: 258%;float: none;margin-top: 0px; margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #f1f5f8;height: 62px;line-height: 99px">问题类型</span>
                        <label style="width: 15%;height: 62px;text-align: left;font-size: 16px;border-bottom: none;position:relative;z-index: 1">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="居民散煤">居民散煤
                        </label>
                        <label style="width: 15%;height: 62px;text-align: left;font-size: 16px;    border-bottom: none;">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="道路扬尘">道路扬尘
                        </label>
                        <label style="width: 15%;height: 62px;text-align: left;font-size: 16px;    border-bottom: none;">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="工地扬尘">工地扬尘
                        </label>
                        <label style="width: 15%;height: 62px;text-align: left;font-size: 16px;    border-bottom: none;">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="工业废气">工业废气
                        </label>
                        <label style="width: 15%;height: 62px;text-align: left;font-size: 16px;    border-bottom: none;">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="餐饮油烟">餐饮油烟
                        </label>

                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff"></span>
                        <label style="width: 18%;text-align: left;font-size: 16px;position:relative;z-index: 1">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="散乱污">散乱污
                        </label>
                        <label style="width: 18%;text-align: left;font-size: 16px;">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="着火点">着火点
                        </label>
                        <label style="width: 25%;text-align: left;font-size: 16px;">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="燃煤锅炉(小茶炉)">燃煤锅炉(小茶炉)
                        </label>
                        <label style="width: 19%;text-align: left;font-size: 16px;">
                            <input style="width: 15px;height: 59px;" type="checkbox" class="ipt" name="其他">其他
                        </label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">情况说明</span>
                        <label>
                            <input type="text" name="situationDes" placeholder="请填写情况说明" style="background: #fcfcfc;    width: 258%;margin-left: 4%;
    float: none;
    margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <li class="bordercolor clearfix">
                        <span style="border-bottom: 1px solid #fff">处理结果</span>
                        <label>
                            <input type="text" name="processResult" placeholder="请填写处理结果" style="background: #fcfcfc;    width: 258%;margin-left: 4%;
    float: none;
    margin-top: 8px;">
                        </label>
                        <label style="width: 50%;"></label>
                    </li>
                    <form id="dass" action="">
                        <li class="bordercolor clearfix">
                            <span style="border-bottom: 1px solid #fff;height: 100px;line-height: 100px">照片</span>
                            <label style="width: 80%;height: 100px;">
                                <div class="picture prevTwo" style="position: relative">
                                    <input type="hidden" name="attachmentId">

                                    <img class="fl addPhotos" style="    width: 60px;cursor: pointer;
    height: 60px;
    margin-top: 4px;
    margin-right: 7px;" src="/img/grid/addtupin.png" alt="添加照片">
                                    <input type="hidden" name="attachmentName">

                                    <ul class="fl">

                                    </ul>

                                    <%--style="display:none;position: absolute;width: 68px;height: 30px;top: 27px;right: 5px;"--%>

                                </div>
                            </label>
                        </li>
                    </form>
                    <div class="tijiao" style="cursor: pointer"><a style="color: #fff" href="javascript:;">提交</a></div>
                    <div class="fanhui"><a id="fanhu" style="color: #fff" href="javascript:;">返回</a></div>
                </ul>



            </div>
        </form>


    <script>
        $('#fanhu').click(function(){
            $(window.parent.document).find('.headli1_1').addClass('one');
            $(window.parent.document).find('.headli2_1').removeClass('one');
        })

        var time = {
            elem:'#time',
            format:'YYYY-MM-DD hh:mm:ss',
            min:laydate.now(),
            max:'2999-12-31 23:59:59',
            istime:true,//是否显示时分秒
            istoday:true,//是否显示【今天】的按钮
            isclear:true,//是否显示【清空】的按钮
            festival: true,//是否显示节日
            start: laydate.now(0,"YYYY-MM-DD hh:mm:ss"),  // 开始日期
            fixed: false,   // 是否固定在可视区域
            zIndex: 10000,  // css控制图层的遮罩效果（效果不明显）
            ready: function(dates){  // 选择好日期的回调
                console.log(dates)
            }
        }
        laydate(time);
        var date=new Date().Format('yyyy-MM-dd hh:mm:ss')
        $('#time').val(date);


    //上传图片
        function filesTwo(mes) {
            var arr=mes.files;
            var bool=true;
            for(var i=0;i<arr.length;i++){
                if(arr[i].name.indexOf('.png')==-1&&arr[i].name.indexOf('.jpg')==-1&&arr[i].name.indexOf('.PNG')==-1&&arr[i].name.indexOf('.JPG')==-1){
                    bool=false;
                    break;
                }
            }
            if(!bool){
                $.layerMsg({content:'只能上传.png或.jpg格式！',icon:2});
                return
            }
            $('#datasave').prop('action','/flow/fileUpload?module=parameter')

            $('#datasave').ajaxSubmit({
                type:'post',
                dataType:'json',
                success:function (json) {
                    if(json.flag) {
                        console.log(json)
                        var str='';
                        var arr=json.datas;
                        var attStrId='';
                        var attStrName='';
                        for(var i=0;i<arr.length;i++){

                            attStrId+=arr[i].attStrId+',';
                            attStrName+=arr[i].attStrName+'*';
                            str+='<li class="pic" style="width: 60px;height: 60px;float:left">' +
                                '<b class="deleClear" style="position: absolute">x</b>' +
                                '<img src="/xs?'+arr[i].attUrl+'" alt="">' +
                                '<input type="hidden" class="hiddenId" value="'+arr[i].attStrId+'">' +//id
                                '<input type="hidden" class="hiddenName" value="'+arr[i].attStrName+'">' +//名字
                                '</li>'
                        }
                        $(me).siblings('ul').html(str)
                        $(me).prev().val(attStrId)
                        $(me).next().val(attStrName)
                    }else {
                        alert('异常')
                    }

                }
            })

        }

        $(document).delegate('.deleClear','click',function () {
            $(this).parent().remove()
        })

        $('.addPhotos').click(function () {
            me=this;
            $('[name="file"]').click()
        })

        $('#fanhu').on('click',function () {
            $.cookie('md',1 , { expires: 7 , path: '/' });
            window.location.href='/street/backlogkongqi'
        })

        $('.tijiao').on('click',function () {
            $('#time').removeAttr('disabled')

            if($('input[name="pollutionName"]').val()==""){
                $.layerMsg({content:'请填写污染源名称',icon:7});
                return ;
            }

            var remindTime = $("input[name='reportTime']").val();
            /*var strs = remindTime.toString();
            strs = strs.replace("/-/g", "/");*/
            /*var oDate1 = new Date(strs);*/

            var str = '';
            $('.ipt:checked').each(function () {
                var id=$(this).attr('name');
                str += id+','
            })
            var gos;
            var attIdLen=$('.hiddenId').length;
            var attNameLen=$('.hiddenName').length;
            var attId="";
            var attName="";
            for(var i=0;i<attIdLen;i++){
                attId += $('.hiddenId').eq(i).attr('value')+','
            }
            for(var i=0;i<attNameLen;i++){
                attName += $('.hiddenName').eq(i).attr('value')+'*'
            }
            $('input[name="attachmentId"]').val(attId)//图片id
            $('input[name="attachmentName"]').val(attName)//图片名称
            $.ajax({
                url:'/communitypatrol/addPatrol',
                type:'post',
                data:{
                    prolemType:$("input[name='prolemType']").val(),
                    subCounty:$("input[name='subCounty']").val(),
                    subVillage:$("input[name='subVillage']").val(),
                    reportTime:remindTime,
                    patrolUser:$("input[name='patrolUser']").val(),
                    contact:$("input[name='contact']").val(),
                    existingProblem:$("input[name='existingProblem']").val(),
                    pollutionName:$("input[name='pollutionName']").val(),
                    pollutionLocation:$("input[name='pollutionLocation']").val(),
                    situationDes:$("input[name='situationDes']").val(),
                    processResult:$("input[name='processResult']").val(),
                    attachmentId:attId,
                    attachmentName:attName,
                    problemType:str
                },
                dataType:'json',
                success:function(reg){

                    if(reg.flag){
                        $.layerMsg({content:'新建成功',icon:1})
                        $.cookie('md',1 , { expires: 7 , path: '/' });
                        setTimeout("window.location.href='/street/backlogkongqi'",2000);
                            $(window.parent.document).find(".headli1_1").addClass("one")
                            $(window.parent.document).find(".headli2_1").removeClass("one")
                    }else{
                        $.layerMsg({content:'新建失败',icon:1})
                    }
                }
            })
        })
        $(document).on('click','.pic img',function () {

            var imgs=$(this).attr('src')
            var wt=$(document.body).width()-300
            var ht=$(document.body).height()-600
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['auto'],
                offset:'100px',
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content:
                '<img src="'+imgs+'" width="'+wt+'" height="'+ht+'">'
            });
        })

        $(document).on('click','.layui-layer-content',function () {
            layer.closeAll()
        })

    </script>
</body>

</html>
